<template>
  <div class="dashboard-container">
    <el-card class="container-card">
      <el-form ref="form" :model="formInline" class="container-filter" label-width="100px">
        <el-form-item label="标签名称">
          <el-input v-model="formInline.tags" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="城市">
          <el-select v-model="formInline.city" placeholder="请选择">
            <el-option label="成都" value="chengdu" />
            <el-option label="重庆" value="chongqing" />
          </el-select>
        </el-form-item>
        <el-form-item label="地区">
          <el-select v-model="formInline.province" placeholder="请选择">
            <el-option label="成都" value="chengdu" />
            <el-option label="重庆" value="chongqing" />
          </el-select>
        </el-form-item>
        <el-form-item label="企业简称">
          <el-input v-model="formInline.shortName" />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="formInline.state" placeholder="请选择">
            <el-option label="启用" value="1" />
            <el-option label="禁用" value="0" />
          </el-select>
        </el-form-item>
        <!-- 按钮 -->
        <el-form-item>
          <el-button size="small">清除</el-button>
          <el-button type="primary" size="small">搜索</el-button>
          <el-button type="success" @click="onAddCompanys" size="small">新增用户</el-button>
        </el-form-item>
      </el-form>
      <!-- 提示总共信息 -->
      <el-alert
        title="总共3条信息"
        type="info"
        show-icon
        class="el-alert"
      >
      </el-alert>
      <my-table
        :table-props="{
          data: this.businessList.items,
          border: true
        }"
        :columns="[
          { label: '序号', prop: 'id', width: 50, align: 'center' },
          { label: '企业编号', prop: 'number',  align: 'center' },
          { label: '企业简称', prop: 'shortName', align: 'center' },
          { label: '标签', prop: 'tags', align: 'center' },
          { label: '创建者', prop: 'creatorID', align: 'center' },
          { label: '创建日期', prop: 'addDate',  align: 'center' },
          { label: '备注', prop: 'remarks',  align: 'center' },
          { label: '状态', prop: 'state', align: 'center' },
          { label: '操作', slotName: 'operators', width: 300, align: 'center', fixed: 'right' }, // 带插槽
        ]"
      >
        <template v-slot:operators="scope">
          <el-button
            type="primary"
            icon="el-icon-edit"
            circle
            @click="onEditItem(scope.row)"
          />
          <el-button
            v-if="scope.row.states"
            type="success"
            icon="el-icon-check"
            circle
            @click="onAlterState(scope.row)"
          />
          <el-button
            v-else
            type="warning"
            icon="el-icon-star-off"
            circle
            @click="onAlterState(scope.row)"
          />
          <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            @click="onRemoveItem(scope.row)"
          />

        </template>
      </my-table>
    </el-card>
    <!-- 编辑弹窗 -->
    <el-dialog title="编辑用户" :visible.sync="editPopupVisible" width="800px">
      <el-form :model="editForm">
        <el-form-item label="企业名称" required>
          <el-input v-model="editForm.shortName" />
        </el-form-item>
        <el-form-item label="所属公司" label-width="80" required>
          <el-input v-model="editForm.company" />
        </el-form-item>
        <div class="label-wep">https://www.tianyancha.com （在此可查询所属公司全称及简称）</div>
        <el-form-item label="方向（企业标签）" label-width="80" required>
          <el-input v-model="editForm.tags" />
        </el-form-item>
        <el-form-item label="备注" required >
          <el-input type="textarea" v-model="editForm.remarks" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editPopupVisible=false">取 消</el-button>
        <el-button type="primary" @click="onEditOk">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 新增用户弹窗 -->
    <el-dialog title="新增用户" :visible.sync="addPopupVisible" width="800px">
      <el-form :model="editForm">
        <el-form-item label="企业名称" required>
          <el-input v-model="editForm.shortName" />
        </el-form-item>
        <el-form-item label="所属公司" label-width="80" required>
          <el-input v-model="editForm.company" />
        </el-form-item>
        <div class="label-wep">https://www.tianyancha.com （在此可查询所属公司全称及简称）</div>
        <el-form-item label="方向（企业标签）" label-width="80" required>
          <el-input v-model="editForm.tags" />
        </el-form-item>
        <el-form-item label="备注" required >
          <el-input type="textarea" v-model="editForm.remarks" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addPopupVisible=false">取 消</el-button>
        <el-button type="primary" @click="onaddOk">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
// 企业管理的api
import * as companysApi from '@/api/hmmm/companys.js'
export default {
  name: 'CompanysList',
  data () {
    return {
      formInline: {
        // 标签名称
        tags: '',
        // 公司简称
        shortName: '',
        // 城市
        city: '',
        // 地区
        province: '',
        // 状态
        state: ''
      },
      // 编辑弹窗
      editPopupVisible: false,
      // 新增弹窗
      addPopupVisible: false,
      // 编辑用户的数据
      formLabelWidth: 100,
      editForm: {
        // 企业名称
        shortName: '',
        // 所属公司
        company: '',
        // 城市
        city: '',
        // 省份
        province: '',
        // 标签
        tags: '',
        // 备注
        remarks: ''
      },
      citys: [],
      provinces: []
    }
  },
  computed: {
    ...mapState('business', [
      'businessList',
      'editList'
    ])
  },
  methods: {
    ...mapActions('business', [
      'updateBusinessList',
      'updateEditList'
    ]),
    onAddCompanys () {
      this.addPopupVisible = true
      this.editForm = {}
    },
    onaddOk () {
      console.log(this.editForm)
      companysApi.add({
        ...this.editForm,
        isFamous: true
      })
    },
    // 删除按钮
    onRemoveItem (row) {
      this.$confirm('此操作将永久删除用户 , 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await companysApi.remove(row)
          this.updateBusinessList()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 打开编辑框
    async onEditItem (row) {
      this.editPopupVisible = true
      await this.updateEditList(row)
      console.log(this.editList)
      this.editForm = this.editList
    },

    // 编辑框确定按钮
    onEditOk () {
      console.log(this.editForm)
      companysApi.update({
        ...this.editForm,
        isFamous: true
      })
      this.editPopupVisible = false
      this.updateBusinessList()
    },
    // 修改状态
    onAlterState (row) {
      companysApi.disabled({
        ...row,
        state: row.states ? 0 : 1
      })
        .then(msg => {
          this.$message.success('操作成功')
          this.updateBusinessList()
          return msg
        })
        .catch(err => {
          this.$message.error('操作失败')
          return err
        })
    }

  },
  created () {
    this.updateBusinessList()
    setTimeout(() => {
      console.log(this.businessList)
    }, 2000)
  }
}
</script>

<style lang="scss" scoped>
  .dashboard-container {
    padding: 24px;
    .container-card {
      padding: 16px 48px 16px 16px;
      .container-filter {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
      }
    }
  }

  .label-wep {
    margin-bottom: 24px;
  }
  ::v-deep .el-dialog__body {
    padding: 24px 120px;
  }
  .dialog-footer {
    text-align: center;
  }
  .el-alert {
    margin-bottom: 16px;
  }
</style>
